import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:sleep/help_style.dart';
import 'package:sleep/provider/sleep_state_provider.dart';
import 'dart:ui' as ui;

import 'package:sleep/provider/wave_deatil_provider/sleep_detail_provider.dart';

class SleepWidget extends ConsumerWidget {
  final VoidCallback detialOnTap;
  const SleepWidget({super.key, required this.detialOnTap});

  Widget title(
    String title,
    String value,
    IconData icon,
    Color iconColor,
  ) {
    return Container(
      padding: const EdgeInsets.fromLTRB(4, 8, 4, 8),
      decoration: const BoxDecoration(
          color: Colors.black12,
          borderRadius: BorderRadius.all(Radius.circular(8))),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              CircleAvatar(
                radius: 10,
                backgroundColor: HelpStyle.backgroundColor,
                child: Icon(icon, size: 12, color: iconColor),
              ),
              Text(
                title,
                style: HelpStyle.smallStyle,
              ),
            ],
          ),
          Text(
            value,
            style: HelpStyle.contextStyle,
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context, ref) {
    final sleep = ref.watch(sleepDetailProvider);
    final sleepState = ref.watch(sleeptateProvider);

    return Container(
      decoration: HelpStyle.decoration,
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Row(children: [
            Text(
              "Details",
              style: HelpStyle.contextStyle,
            ),
            const Expanded(child: SizedBox()),
            GestureDetector(
              onTap: detialOnTap,
              behavior: HitTestBehavior.translucent,
              child: Text("more", style: HelpStyle.contextStyle),
            ),
            GestureDetector(
              onTap: detialOnTap,
              behavior: HitTestBehavior.translucent,
              child: Icon(
                Icons.keyboard_arrow_right_outlined,
                color: HelpStyle.iconColor,
              ),
            )
          ]),
          SizedBox(height: HelpStyle.margin),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(width: HelpStyle.cellMargin),
              Expanded(
                  child: title('RR', sleep.rr, Icons.timeline, iconColors[1])),
              SizedBox(width: HelpStyle.cellMargin),
              Expanded(
                  child: title('T1', sleep.t1, Icons.schedule, iconColors[2])),
              SizedBox(width: HelpStyle.cellMargin),
              Expanded(
                  child: title(
                      'AT', sleep.at, Icons.hourglass_bottom, iconColors[3])),
              SizedBox(width: HelpStyle.cellMargin),
              Expanded(
                  child:
                      title('RI', sleep.ri, Icons.data_array, iconColors[0])),
            ],
          ),
          SizedBox(height: HelpStyle.margin),
          CustomPaint(
            painter: ValuePinter((sleepState?.state?.index.toDouble() != null
                ? (sleepState!.state!.toInt().toDouble())
                : 0)),
            size: const Size(double.infinity, 30),
          ),
          const SizedBox(height: 10),
        ],
      ),
    );
  }
}

const valueCount = 3;
List<Color> colors = [
  const Color.fromARGB(255, 102, 187, 106),
  Color.fromARGB(255, 151, 187, 101),
  const Color.fromARGB(255, 66, 165, 245),
  const Color.fromARGB(255, 239, 83, 80),
  const Color.fromARGB(255, 240, 83, 81)
];

List<String> textes = ['Awake', 'Light sleep', 'Deep sleep'];

class ValuePinter extends CustomPainter {
  final double vaule; //  0 - 10

  ValuePinter(this.vaule);
  @override
  void paint(Canvas canvas, Size size) {
    double startX = 0;
    final margin = size.width / (valueCount * 4 + valueCount - 1);
    final width = margin * 4;
    int index = 0;

    while (startX < size.width) {
      final isOver = index >= vaule;
      final overColors = [HelpStyle.backgroundColor, HelpStyle.backgroundColor];
      final showColors =
          isOver ? overColors : [colors[index], colors[index + 1]];

      final Paint p = Paint()
        ..shader = ui.Gradient.linear(
          Offset(startX, 0),
          Offset(startX + width, 0),
          showColors,
          [0.0, 1.0],
        );

      canvas.drawRect(Rect.fromLTRB(startX, 0, startX + width, size.height), p);
      drawText(
          canvas, Size(width, size.height), Offset(startX, 0), textes[index]);
      startX += width + margin;
      index += 1;
    }
  }

  drawText(Canvas canvas, Size size, Offset offset, String text) {
    const textStyle = TextStyle(
      color: Colors.white,
      fontSize: 14.0,
    );

    final textSpan = TextSpan(
      text: text,
      style: textStyle,
    );

    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
    );

    textPainter.layout(minWidth: 0, maxWidth: size.width);

    textPainter.paint(
        canvas,
        Offset(offset.dx + (size.width - textPainter.width) * 0.5,
            offset.dy + (size.height - textPainter.height) * 0.5));
  }

  @override
  bool shouldRepaint(covariant ValuePinter oldDelegate) {
    return oldDelegate.vaule != vaule;
  }
}
